/*
 * @Author: jipeng.Li
 * @Date: 2020-01-21 2021-1-21 16:20
 * @LastEditors: kanglang
 * @LastEditTime: 2021-02-19 09:45:12
 * @Description: 图片预览
 */
import React, { Component, useState, useEffect } from 'react';
import {
  View,
  Modal,
  TouchableOpacity,
  Image,
  ActivityIndicator,
  Dimensions
} from 'react-native';
import {
  px2dp,
} from "../../../../../common/styles";
import ImageViewer from 'react-native-image-zoom-viewer';
import { iconLeft } from '../../../../../image';

const screenHeight = Dimensions.get("window").height;

const ImagePreview = (props) => {
  const { modalVisible = false, imageIndex = 0, imageSources = [], handleBack = () => { } } = props
  const [animating, setAnimating] = useState(true)


  let images = imageSources.map(image => {
    return {
      url: image
    }
  })

  //这里是写的一个loading
  function renderLoad() {
    return (
      <View style={{ marginTop: (screenHeight / 2) - 20 }}>
        <ActivityIndicator
          animating={animating}
          size={"large"}
        />
      </View>
    )
  }

  return (
    <View>
      <Modal
        animationType={"slide"}
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => handleBack()}
      >
        <ImageViewer
          imageUrls={images} // 照片路径
          enableImageZoom={true} // 是否开启手势缩放
          saveToLocalByLongPress={true} //是否开启长按保存
          index={imageIndex} // 初始显示第几张
          loadingRender={renderLoad}
          enableSwipeDown={true}  // 启用向下滑动以关闭图像查看器。向下滑动时，将触发onCancel
          menuContext={{ "saveToLocal": "保存图片", "cancel": "取消" }}  // 菜单上下文值
          onChange={(index) => { }} // 图片切换时触发
          onClick={() => { }}  // 图片切换触发
          onSave={url => { }}  // 保存图片
          onCancel={() => handleBack()}  // 取消看图的回调
          renderHeader={() => {  // 自定义头部
            return (
              <View>
                <TouchableOpacity
                  onPress={() => handleBack()}
                >
                  <Image
                    style={{
                      width: px2dp(30),
                      height: px2dp(30),
                      margin: px2dp(20)
                    }}
                    source={iconLeft} />
                </TouchableOpacity>
              </View>
            )
          }}
        />
      </Modal>
    </View>
  )
}

export default ImagePreview;
